import ReactDOM from 'react-dom'
import { useRef, useState } from 'react'

const Counter = () => {
  const onClick = () => {
    // console.log((inputRef.current as unknown as HTMLInputElement).value)
    // console.log((inputRef.current as HTMLInputElement).value)
    console.log(inputRef.current)
    // 如果需要使用非空断言，就需要对象的类型确定
    // 就是inputRef的类型不能是空，需要设定类型为HTMLInputElement
    // console.log(inputRef.current!.value)
    console.log((inputRef.current as any).value)
  }

  // const inputRef = useRef<HTMLInputElement>(null)
  const inputRef = useRef(null)

  // 自定义的双向绑定方式
  function useModel(initialValue: any) {
    const [value, setValue] = useState(initialValue);

    const handleChange = (event: any) => {
      setValue(event.target.value);
    };

    return [value, handleChange];
  }
  const [inputValue, setInputValue] = useModel('')

  return (
    <div>
      <input type='text' ref={inputRef} value={inputValue} onChange={setInputValue} />
      <button onClick={onClick}>获取文本框的值</button>
      <p>Input value: {inputValue}</p>
    </div>
  )
}

ReactDOM.render(<Counter />, document.getElementById('root'))
